<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto+Slab">
    <title>Hello, Kotlin/JS!</title>
    <script src="sample.js"></script>
</head>
<body>
<h1>Krayon Sample</h1>
<h2>Line Chart</h2>
<canvas id="line-canvas" style="height: 480px; width: 854px"></canvas>
<h2>Pie Chart</h2>
<table>
    <tr>
        <td>
            <canvas id="pie-canvas" style="height: 480px; width: 480px"></canvas>
        </td>
        <td>
            <form>
                <label for="pie-start-angle">Start Angle</label>
                <input type="range" id="pie-start-angle"/>
                <br/>
                <label for="pie-end-angle">End Angle</label>
                <input type="range" id="pie-end-angle"/>
                <br/>
                <label for="pie-corner-radius">Corner Radius</label>
                <input type="range" id="pie-corner-radius"/>
                <br/>
                <label for="pie-padding-angle">Padding Angle</label>
                <input type="range" id="pie-padding-angle"/>
                <br/>
                <label for="pie-inner-radius">Inner Radius</label>
                <input type="range" id="pie-inner-radius"/>
            </form>
        </td>
    </tr>
</table>
<h2>Interaction</h2>
<canvas id="interaction-canvas" style="height: 480px; width: 854px"></canvas>
</body>
<script>
    sample.setupMovingSineWave(document.getElementById("line-canvas"));
    sample.setupPieChart(document.getElementById("pie-canvas"));
    sample.setupInteractiveChart(document.getElementById("interaction-canvas"));
</script>
</html>
